<template>
  <div class="component-group">
    <div
      class="component-item"
      v-for="component in componentList"
      :key="component.name"
      draggable="true"
      @dragstart="handleDragstart($event, component)">
      <img class="component-image" :src="component.imageUrl" alt="" />
      <div class="component-label">{{ component.label }}</div>
    </div>
  </div>
</template>
<script setup>
  import { inject } from 'vue';
  import { handleDragstart } from '@/views/editor/hooks/use-component-drag';
  const config = inject('editorConfig');
  const componentList = config.componentList;
</script>
<style scoped lang="less">
  .component-group {
    display: flex;

    .component-item {
      flex: 1;
      flex-shrink: 0;
      height: 100px;
      border: 1px solid #ccc;
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;

      .component-image {
        height: 50px;
      }
      .component-label {
        font-size: 12px;
      }
    }
  }
</style>
